<template>
  <button
    :class="[
      'px-4 py-2 rounded-lg text-sm font-medium transition-all transform hover:scale-105', 
      variant === 'primary' 
        ? 'bg-gradient-to-r from-purple-600 to-indigo-600 text-white hover:opacity-90 shadow-lg shadow-purple-500/20' 
        : 'border border-purple-300 text-purple-600 hover:bg-purple-50 shadow-lg shadow-purple-500/10',
      className
    ]"
    @click="$emit('click')"
    :disabled="disabled"
    :type="type"
  >
    <div class="flex items-center justify-center gap-2">
      <slot name="icon"></slot>
      <slot></slot>
    </div>
  </button>
</template>

<script setup>
defineProps({
  variant: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'button'
  },
  className: {
    type: String,
    default: ''
  }
})

defineEmits(['click'])
</script> 